import React from 'react';
import PropTypes from 'prop-types';
import Children from '../common/children'

export default class Tab extends React.Component{

    static defaultProps ={

        defultCurrent:'0',
        activeClass: 'active',

    }

    static propTypes = {

        defultCurrent : PropTypes.string.isRequired,
        activeClass : PropTypes.string.isRequired

    }

    constructor(props){

        super(props);

        this.state={

            currentIndex:this.props.defultCurrent

        }
    }

    select = (index, onSelect=function(){}) => {
        onSelect()
        this.props.onSwitch&&this.props.onSwitch(index)
        this.setState({ currentIndex: index })
    }    

    render(){
        const {currentIndex} = this.state;
        let children = Children.filter(this.props.children, item => item!=null)
        return(
            <div>
                <div className="Ibox clearfix">
                <div className="row text-center nav">
                {
                    children.map((ele, index)=> {
                        if (ele) {
                            return <a onClick={this.select.bind(this, index, ele.props.onSelect)} key={index} className={currentIndex==index?"col-xs-4 "+this.props.activeClass:"col-xs-4"}>{ele.props.name}</a>
                        }
                    })
                }
                </div>
                </div>
                    {
                        children.map((ele, index)=> {
                            if (ele) {
                                return currentIndex==index&&ele
                            }
                            
                        })
                    }

            </div>

        )
    }
}